<template>
  <div>
    <navigation-bar>
      <div class="searchContent">&nbsp;</div>
    </navigation-bar>
    <!-- 密码输入框 -->
    <el-input
      v-model="tempPassword"
      type="password"
      placeholder="请输入4-16位密码"
      style="margin-bottom: 20px; width: 300px; margin: 20px"
    />
    <el-button @click="handleConfirm" :loading="loading">确定修改</el-button>
  </div>
</template>

<script>
import navigationBar from "@/components/customComponents/managementCenter/navigationBar";
import { AjaxCommon } from "@/libs/apiCommon";
export default {
  components: {
    navigationBar,
  },
  data() {
    return {
      loading: false,
      tempPassword: "", // 密码输入值
      // 密码验证正则（4-16位字母/数字/常见特殊字符）
      passwordReg: /^[a-zA-Z0-9]{4,16}$/,
    };
  },
  methods: {
    // 确定按钮逻辑（核心验证）
    async handleConfirm() {
      this.loading = true;
      // 1. 空值校验
      if (!this.tempPassword) {
        this.$message.error("请输入密码！");
        this.loading = false;
        return;
      }
      // 2. 规则校验
      if (!this.passwordReg.test(this.tempPassword)) {
        this.$message.error("密码格式错误！需4-16位，仅支持字母、数字");
        this.loading = false;
        return;
      }
      // 3. 验证通过（仅执行业务逻辑，不关闭弹窗）
      const res = await AjaxCommon(
        "/api/Role/DownloadPasswordPut?password=" + this.tempPassword,
        "put",
        null
      );
      console.log(res, "res...............");
      if (!res.data.success) {
        this.$message.error("修改失败");
      } else {
        this.$message.success("修改成功");
      }
      this.loading = false;
    },
  },
  mounted() {
    this.$nextTick(() => {});
  },
};
</script>

<style>
</style>
